<template>
  <div class="count">
    <h1 ref="count">{{count}}</h1>
    <button @click="count++">累加</button>
  <button @click="getEle">点击获取h1</button>
  </div>
</template>

<script>
export default {
 name: "Count",
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    getEle() {
      /* 
        在组件实例上有一个$ref属性,是一个对象,对象保存的是模板中书写了ref属性的元素
        可以通过this.$refs.xxx获取,得到是一个真实DOM
      */
      console.log(this);
      console.log(this.$refs.count);
    },
  },
}
</script>

<style>
.count {
  background-color: yellowgreen;
  height: 200px;
}
</style>